import React from 'react'
import { FileText, Hash, Clock, Save } from 'lucide-react'

interface StatusBarProps {
  currentFile: {
    path: string
    content: string
  } | null
  wordCount: number
}

const StatusBar: React.FC<StatusBarProps> = ({
  currentFile,
  wordCount
}) => {
  const getFileName = () => {
    if (!currentFile?.path) return '未命名文档'
    return currentFile.path.split('/').pop() || '未命名文档'
  }

  const getFileStatus = () => {
    if (!currentFile) return ''
    return currentFile.path ? '已保存' : '未保存'
  }

  const getCharacterCount = () => {
    if (!currentFile?.content) return 0
    return currentFile.content.length
  }

  const getLineCount = () => {
    if (!currentFile?.content) return 0
    return currentFile.content.split('\n').length
  }

  const getCurrentTime = () => {
    return new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  return (
    <div className="status-bar flex items-center justify-between px-4 py-1 bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400">
      <div className="status-bar-left flex items-center gap-4">
        {/* File Info */}
        <div className="flex items-center gap-2">
          <FileText className="w-3 h-3" />
          <span>{getFileName()}</span>
          {currentFile?.path && (
            <span className="text-gray-500 dark:text-gray-500">
              ({currentFile.path})
            </span>
          )}
        </div>

        {/* Status */}
        <div className="flex items-center gap-1">
          <Save className="w-3 h-3" />
          <span>{getFileStatus()}</span>
        </div>
      </div>

      <div className="status-bar-right flex items-center gap-4">
        {/* Word Count */}
        <div className="flex items-center gap-1">
          <Hash className="w-3 h-3" />
          <span>{wordCount} 词</span>
        </div>

        {/* Character Count */}
        <div className="flex items-center gap-1">
          <span>{getCharacterCount()} 字符</span>
        </div>

        {/* Line Count */}
        <div className="flex items-center gap-1">
          <span>{getLineCount()} 行</span>
        </div>

        {/* Current Time */}
        <div className="flex items-center gap-1">
          <Clock className="w-3 h-3" />
          <span>{getCurrentTime()}</span>
        </div>
      </div>
    </div>
  )
}

export default StatusBar